<template>
  <div class="login">
    <van-nav-bar left-text="我的">
      <template #right>
        <div class="home-text" @click="goPage('home')">首页</div>
      </template>
    </van-nav-bar>
    <div class="login-box">
      <div class="welcome-title">欢迎回来！</div>
      <div class="welcome-subtitle">Please login to your accounts</div>

      <div class="form-box">
        <van-form>
          <van-field
            v-model="loginUserInfo.phone"
            name="手机号"
            label="手机号"
            placeholder="手机号"
           autocomplete="off"
          />
          <van-field
            v-model="loginUserInfo.password"
            :type="!isOpenLogin ? 'password' : 'text'"
            name="密码"
            label="密码"
            placeholder="密码"
            :right-icon="!isOpenLogin ? 'closed-eye' : 'eye-o'"
            autocomplete="off"
            @click-right-icon="toggleLoginPasssword"
          />
          <div class="forgot">
            <div class="forgot-pwd">忘记密码？</div>
          </div>
          <div class="login-btn">
            <van-button round block color="#58a7f8" @click="login"
              >登录</van-button
            >
          </div>
           <div class="login-btn">
            <van-button round block type="default" @click="showPopup"
              >注册</van-button
            >
          </div>
        </van-form>
      </div>
    </div>

    <!-- 注册 -->
    <van-popup v-model="show" position="bottom" closeable>
      <div class="register-box">
        <div class="register-title">
          注册
        </div>
        <van-form>
          <van-field
            v-model="registerUserInfo.phone"
            name="手机号"
            label="手机号"
            placeholder="手机号"
            autocomplete="off"
          />
          <van-field
            v-model="registerUserInfo.password"
            :type="!isOpenRegister ? 'password' : 'text'"
            name="密码"
            label="密码"
            placeholder="密码"
            :right-icon="!isOpenRegister ? 'closed-eye' : 'eye-o'"
            autocomplete="off"
            @click-right-icon="toggleResgiterPasssword"
          />
         
          <div class="login-btn">
            <van-button round block color="#58a7f8" @click="register"
              >注册</van-button
            >
          </div>

        </van-form>
      </div>
    </van-popup>
  </div>
</template>

<script>
import store from '@/store';
export default {
  name: "Login",
  data() {
    return {
      //是否显示注册弹窗
      show: false,
      loginUserInfo: {
        phone: '',
        password: ''
      },
      registerUserInfo: {
        phone: '',
        password: '',
        zhui:[],
        lishi:[]
      },

      //查看注册密码
      isOpenRegister: false,

      //查看登录密码
      isOpenLogin: false,
    }
  },

  methods: {
    showPopup() {
      this.show = !this.show;
    },

    //查看首页
    goPage(name) {
      this.$router.push({name});
    },

    //切换注册密码可见状态
    toggleResgiterPasssword() {
      this.isOpenRegister = !this.isOpenRegister;
    },

    //切换登录密码可见状态
    toggleLoginPasssword() {
      this.isOpenLogin = !this.isOpenLogin;
    },

    //注册
    register() {
        if (this.registerUserInfo.phone ==='' || this.registerUserInfo.password==='') {
            this.$toast({
                message: '请填写完整',
                duration:1000
            })
            return
        }
        if (localStorage.getItem('user')===null) {
            let arr = []
            arr.push(this.registerUserInfo)
            localStorage.setItem('user', JSON.stringify(arr));
        }else{
            let registerUserInfo = JSON.parse(localStorage.getItem('user'))
            for (let i = 0; i < registerUserInfo.length; i++) {
                if (registerUserInfo[i].phone === this.registerUserInfo.phone) {
                    this.$toast({
                        message: '手机号已存在',
                        duration:1000
                    })
                    this.registerUserInfo.phone = ""
                    this.registerUserInfo.password = ""
                    return
                }
            }
            registerUserInfo.push(this.registerUserInfo)
            localStorage.setItem('user', JSON.stringify(registerUserInfo));
        }
        this.$toast({
            message: '注册成功',
            duration:1000
        })
        this.registerUserInfo.phone = ""
        this.registerUserInfo.password = ""
        this.showPopup()
    },

    //登录
    login() {
        let userInfoData = JSON.parse(localStorage.getItem('user'))
        if (userInfoData) {
            for (let i = 0; i < userInfoData.length; i++) {
              if(userInfoData[i].phone === this.loginUserInfo.phone){
                  if (userInfoData[i].password === this.loginUserInfo.password) {
                      this.$toast.success({
                          message: '登录成功',
                          duration:1000
                      });
                      let time = new Date().getTime() + 1000*60*60*24
                      let g = new Date(time).toUTCString()
                      document.cookie = `login = true;expires=` + g;
                      document.cookie = `phone = ${this.loginUserInfo.phone};expires=` + g;
                      setTimeout(()=>{
                        this.$router.push({name:'home'});
                      },1000)
                      return
                  } else {
                      this.$toast.fail({
                          message: '密码错误',
                          duration:1000
                      });
                      return
                  }
              }
          }
        }
        else{
          this.$toast({
              message: '该账号未注册',
              duration:1000
          })
        }
        
    }
  }
};
</script>

<style lang="less" scoped>
/deep/.van-nav-bar__text {
    color: #58a7f8;
    font-size: 16px;
    font-weight: 600;
    }
.login {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: #fff;
  .register-title{
    font-size: 24px;
    margin-bottom: 20px;
  }
  .register-box{
    padding: 10px;
  }
  .forgot{
    margin-top: 20px;
    display: flex;
  }
  .forgot-pwd{
    margin-left: auto;
    font-size: 14px;
    color: #666;
  }
  .login-btn{
    margin-top: 50px;
  }
  .form-box{
    margin-top: 50px;
  }
  .welcome-title {
    font-size: 30px;
  }
  .welcome-subtitle {
    font-size: 18px;
    margin-top: 20px;
    color: #999;
  }
  .login-box {
    margin-top: 80px;
    padding: 10px;
  }
  .home-text {
    color: #58a7f8;
    font-weight: bold;
    font-size: 14px;
  }
  .left-box {
    display: flex;
    align-items: center;
  }
  .logo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
  }
  .logo-text {
    margin-left: 10px;
    font-weight: bold;
    font-size: 14px;
  }
}
</style>